<template>
    <view>
        <view class="form p-4">
            <view class="h10 font-weight-600 py-4 text-danger">动作骰子</view>
            <view class="bg-white rounded-4 flex flex-center p-2 mb-4" v-for="(item, index) in form.BODY_ACTION" :key="index">
                <view class="h9">第{{ index + 1 }}面</view>
                <input v-model="item.content" type="text" class="flex-1 font-weight-600 p-2" placeholder="请输入内容">
            </view>
            <view class="h10 font-weight-600 py-4 text-danger">肢体骰子</view>
            <view class="bg-white rounded-4 flex flex-center p-2 mb-4" v-for="(item, index) in form.BODY_PARTS" :key="index">
                <view class="h9">第{{ index + 1 }}面</view>
                <input v-model="item.content" type="text" class="flex-1 font-weight-600 p-2" placeholder="请输入内容">
            </view>
        </view>
        <view class="pb-safe-area" style="height: 50px;"/>
        <view class="position-bottom pb-safe-area">
            <view class="p-4 flex">
                <view class="flex-1 bg-primary text-white rounded-4 px-6 py-2 font-weight-600 text-center h8"
                    hover-class="bg-primary-dark-1" @tap="save">保存并开始</view>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { onLoad } from "@dcloudio/uni-app";
import { $page, useGameCustom } from '@/utils';
const gameCustom = useGameCustom('LOVERS_DICE');
const form = ref<{
    BODY_ACTION:any[],
    BODY_PARTS:any[]
}>({
    BODY_ACTION:[
        {
            content:''
        },
        {
            content:''
        },
        {
            content:''
        },
        {
            content:''
        },
        {
            content:''
        },
        {
            content:''
        },
    ],
    BODY_PARTS:[
    {
            content:''
        },
        {
            content:''
        },
        {
            content:''
        },
        {
            content:''
        },
        {
            content:''
        },
        {
            content:''
        },
    ]
})
onLoad(() => {
    gameCustom.get().then((data: any) => {
        form.value = data || []
    }).catch(() => {})
})
const save = () => {
    gameCustom.set(form.value).then(() => {
        $page.open(`/pages/game/LOVERS_DICE?id=custom`);
    }).catch((msg: any) => {
        uni.showToast({
            title: msg || '保存失败',
            icon: 'none'
        })
    })
}
</script>

<style lang="scss" scoped>
.form {
    min-height: calc(100vh - var(--window-top));
}

.h9 {
    width: 60px;
}

.position-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--xl-white);
    z-index: 1;
}
</style>
